<template>
  <div class="vip">
    <nav_bar title='购买会员' background='#fff' :back="true"  @back="handlerGobackClick"></nav_bar>
    <div class="tip" v-if="vipList.length==0">当前未开通VIP</div>
    <div class="vip" v-else>
        <div class="details_content" v-for="(item,index) of vipList" :key="index">
        {{item.type=='num'?'可用张数'+item.free_num:'会员到期时间'+item.end_time}}
      </div>
      </div>
    <div class="list">
      <div
       @click="selectItem(index,item)"
       v-for="(item,index) of ruleData"
       :key="index"
      :class="{item:true,item_active:index==activeIndex}"
      >
        <div class="item_name">{{item.name}}</div>
        <div class="item_mprice">￥{{item.original_price}}</div>
        <div class="item_price">{{'￥'+item.price}}</div>
      </div>
    </div>

    <!-- 发票 -->
    <div class="bill">
        <div class="checkbox_wrapper">
          <checkbox /><span>电子发票</span>
        </div>
        <div class="myBill">
          <navigator url="/pages/billList/main">我的发票抬头</navigator>
        </div>
    </div>

    <div class="billDetail">
      <div class="item">
          <div class="item_name">公司名称：</div>
          <input type="text" placeholder="请输入公司名称" v-model="company_name">
          <picker @change="selectBill"  :range="billArrName">
            <img src="../../../static/images/icon/arrowD.png" alt="" class="arrowD">
          </picker>
        </div>
        <div class="item">
          <div class="item_name">发票税号：</div>
          <input type="text" placeholder="请输入发票税号" v-model="company_checknumber">
        </div>
        <div class="item">
          <div class="item_name">邮箱地址：</div>
          <input type="text" placeholder="请输入邮箱地址" v-model="company_email">
        </div>
    </div>

    <div class="submit" @click="buildOrder">确认支付</div>
  </div>
</template>
<script>
export default {
  name:'vip',
  data() {
    return {
      activeIndex:-1,
      activeIntem:'',
      ruleData:[{name:'20张',price:'10'},{name:'20张',price:'10'},{name:'20张',price:'10'},{name:'20张',price:'10'}],
      vipList:[],//用户的vip信息
      billList:'',//发票数据
      billArrName:'',
      company_name:'',
      company_checknumber:'',
      company_email:''
    }
  },
  methods: {
    handlerGobackClick(){
      wx.switchTab({url:`/pages/me/main`})
    },
    selectItem(index,item){
      this.activeIndex=index;
      this.activeIntem=item
    },
    selectBill(e){
      const index=e.target.value;
      this.company_name=this.billList[index].company_name;
      this.company_checknumber=this.billList[index].Invoice_tax_number;
      this.company_email=this.billList[index].email_address;
    },
    async getVipRule(){
      //获取vip规则
      const res=await this.$request.getData('/other/getVupRuleList')
      if(res.data.level=='success'){
        this.ruleData=res.data.data
      }
    },
    async getBill(){
      //获取抬头列
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.getData('/ucenter/getInvoiceLookUpList',{
        user_token:userToken
      })
      if(res.data.level=='success'){
        this.billList=res.data.data
        this.billArrName=this.billList.map((item)=>{
          return item.company_name
        })
      }
    },
    async buildOrder(){
      //生成订单
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.postData('/order/buildOrder',{
        user_token:userToken,
        point_item_id:'',
        type:'vip',
        vip_id:this.activeIntem.id,
        company_name:this.company_name,
        invoice_tax_number:this.company_checknumber,
        email_address:this.company_email
      })

      if(res.data.level=='success'){
        this.payBuild(res.data.data.order_num)
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    async getUserInfo(){
      //获取用户的状态信息
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        if(res.data.data instanceof Object){
        this.vipList=res.data.data.user_vip_list
        }
    },
    async payBuild(order_num){
        //支付
        const _this=this
        const userToken=wx.getStorageSync('userToken');
        const res=await this.$request.postData('/payment/weChatPayment',{
          user_token:userToken,
          order_num:order_num
        })
        // this.$currency.showToast(res.data.message);
        if(res.data.level=='success'){
            const data=res.data.data
            setTimeout(()=>{
                wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                  success() {
                  _this.$currency.showToast('支付成功')
                  setTimeout(()=>{
                  _this.getVipRule()
                  },1500)

                  },
                  fail(res) {
                  console.log('取消支付')
                  }
            })
            },1500)
          }
        }

  },
  onLoad(){
    this.getVipRule();
    this.getUserInfo();
  },
  onShow(){
    this.getBill();
  }
}
</script>
<style lang="scss" scoped>
  .vip{
    padding:10px;
  }
  .tip{
    padding:20px 0;
    font-size: 18px;
  }
  .list{
    color: #409eff !important;
    border: 1px solid #d9ecff !important;
    background-color: #ecf5ff !important;
    border-radius: 5px;
    padding:10px;
    .item{
      display: flex;
      font-size: 20px;
      justify-content: space-between;
      align-items: center;
      padding:15px 10px;
      &_price{
        flex:1;
        text-align: right
      }
      // &_name{
      //   width: 60px;
      // }
      &_mprice{
        text-decoration:line-through;
        font-size:14px;
        margin-left: 10px;
      }
    }
    .item_active{
      background-color: #409eff!important;
      color: #fff !important;
      border-radius: 5px;
    }
  }

  .bill{
    margin-top:30px;
    display: flex;
    align-items: center;
    font-size: 16px;
    .myBill{
      margin-left: 60px;
      color:rgb(118, 118, 238);
      border-bottom: 1px solid rgb(118, 118, 238);
    }
  }
  .billDetail{
    font-size: 16px;
    border-bottom: 1px solid #eee;
    .arrowD{
      width: 30px;
      height: 30px;
    }
    .item{
      display: flex;
      align-items: center;
      margin:15px 0;
    }
  }
  .submit{
    background: #e74240;
    color:#fff;
    width: 180px;
    border-radius: 10px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    margin:20px auto;
    text-align: center;
  }
  
</style>
<style>
/* 小程序checkbox的自定义样式，且不能用scoped */
 checkbox .wx-checkbox-input{
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin-top: -4px;
    border: 1px solid gray;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 20px;
  padding: 5px;
  color: #fff;
  border-radius: 50%;
  background-color: red;
  border:1px solid #eee
}
</style>
